.banner {

    //指示点
    .carousel-indicators {
        margin-bottom: 1vw;

        button {
            width: 1vw;
            height: 1vw;
            border-radius: 50%;
            background: none;
            border: 1px solid #fff;
            opacity: unset;
            margin: 0 6px;
        }

        .active {
            background-color: #fff;
        }
    }
}

.head {
    margin-top: 11.6667vw;
    margin-bottom: 5.8333vw;

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;

        h1 {
            font-size: calc(12px + 3vw);
            // font-size: 3.8vw;
            color: #bebebe;
            font-weight: 200;
            // letter-spacing: 5px;
            letter-spacing: .4167vw;
        }

        div {
            // width: 178px;
            // height: 42px;
            width: calc(118px + 5vw);
            height: calc(32px + .5208vw);
            border: 1px solid #e0e0e0;
            color: #010101;
            text-align: center;
            line-height: calc(32px + .5208vw);
            position: relative;
            margin: 0 110px;

            &::before {
                content: "";
                // width: 210px;
                width: calc(10px + 16.6667vw);
                height: 1px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: calc(128px + 2.5vw);
                background-color: #e0e0e0;
            }

            &::after {
                content: "";
                width: calc(10px + 16.6667vw);
                height: 1px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: calc(128px + 2.5vw);
                background-color: #e0e0e0;
            }
        }

        span {
            font-size: 12px;
            color: #656565;
        }
    }
}

#carouselExampleIndicators2,
#carouselExampleIndicators3 {

    //指示点
    .carousel-indicators {
        bottom: unset;
        margin: 0;
        margin-top: -20px;

        button {
            width: calc(60px + 2.5vw);
            height: calc(20px + 1.25vw);
            background: none;
            border: 2px solid #ccc;
            opacity: unset;
            margin: 0 2.5vw;
            color: #1f1f1f;
            font-size: 12px;
            text-indent: 0;
            background-color: rgba(255, 255, 255, 0.85);
        }

        .active {
            // background-color: #c5ca28;
            // border: 0;
        }
    }
}

.living,
.living_design {
    overflow: hidden;
}

.living_news {
    #carouselExampleIndicators3 {
        .text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 75vw;
            // height: 37.5vw;
            display: flex;

            &>.left {
                flex: 1;
                background-color: #fff;
                position: relative;

                h6 {
                    font-size: calc(12px + .5vw);
                    padding-left: 2.5vw;
                    margin-top: 1.25vw;
                }

                p {
                    padding-left: 2.5vw;
                    padding-right: 4.1667vw;
                    color: #333333;
                    font-size: 12px;
                }

                span {
                    position: absolute;
                    bottom: 1vw;
                    right: 4.1667vw;
                    color: #333333;
                    font-size: 12px;
                    color: #333333;
                    border: 1px solid #333;
                    border-radius: 18px;
                    padding: 0 5px;
                    line-height: 18px;
                    cursor: pointer;
                }
            }

            &>.right {
                flex: 1;
                padding-left: 1.3333vw;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;

                .item {
                    background-color: #fff;
                    display: flex;
                    padding-right: 4.1667vw;
                    position: relative;
                    width: 100%;

                    .left {
                        width: 13.75vw;
                        // height: 11.6667vw;
                        padding: 1.25vw;
                    }

                    .right {
                        padding: 1.25vw 0;

                        h6 {
                            font-size: calc(12px + .1667vw);
                        }

                        p {
                            color: #333333;
                            font-size: 12px;
                        }

                        span {
                            position: absolute;
                            bottom: 1.3vw;
                            right: 4.1667vw;
                            color: #333333;
                            font-size: 12px;
                            color: #333333;
                            border: 1px solid #333;
                            border-radius: 18px;
                            padding: 0 5px;
                            line-height: 18px;
                            cursor: pointer;
                        }
                    }
                }

                .item:nth-child(2n) {
                    margin: 1.25vw 0;
                }
            }
        }
    }
}

.living_service {
    padding-bottom: 10vw;

    .head {
        margin-bottom: 4.1667vw;
    }

    .container {
        .title {
            width: 40%;
            margin: 0 auto;
            text-align: center;
            font-size: 12px;
            margin-bottom: 5vw;
        }

        .item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            h6 {
                font-size: calc(12px + .3333vw);
                margin-top: 1.25vw;
            }

            p {
                font-size: 12px;
                color: #666668;
                text-align: center;
                margin-top: 1.25vw;
            }
        }
    }
}

.living_center {
    overflow: hidden;
    background: url('./assets/home/living_center1.png') no-repeat;
    background-size: cover;
    padding-bottom: 5vw;
    margin-bottom: 10px;

    .head {
        margin-top: 7.9167vw;

        h1 {
            color: #fefefe;
        }

        .container {
            div {
                border: 1px solid #fefefe;
                color: #fefefe;

                &::before {
                    background-color: #fefefe;
                }

                &::after {
                    background-color: #fefefe;
                }
            }

            span {
                color: #fefefe;
            }
        }

    }

    .container {
        .row {
            .item {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-bottom: 20px;

                .title {
                    font-size: calc(12px + 1vw);
                    color: #fff;
                    border: 1px dashed #fff;
                    border-radius: 50%;
                    width: calc(44px + 8.3333vw);
                    height: calc(44px + 8.3333vw);
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    span {
                        letter-spacing: 3px;
                        margin: 2px 0;
                    }
                }

                .hr {
                    width: 0;
                    height: 6.6667vw;
                    border-left: 1px dashed #fff;
                }

                .text {
                    width: 100%;
                    // height: calc(80px + 8.3333vw);
                    border: 1px dashed #fff;
                    font-size: 12px;
                    color: #fff;
                    // text-align: center;
                    padding: .8333vw 2.5vw 1.25vw;
                    overflow: hidden;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    p {
                        text-align: center;
                        margin: 0;
                    }
                }
            }
        }
    }
}


@media screen and (max-width:768px) {
    .living_news {
        .item {
            .right {
                span {
                    display: none !important;
                }
            }
        }
    }

    .living_service {
        .title {
            width: 100% !important;
        }
    }
}

@media screen and (max-width:1200px) {
    .living_news {
        .item:nth-child(2n) {
            margin: 0.5vw 0 !important;
        }
    }

    .living_service {
        #living_service_title {
            width: 60%;
        }
    }
}

@media screen and (max-width:1400px) {
    .living_news {
        .item {
            padding-right: 1vw !important;
        }
    }
}